<!--用于显示功能组件的README文档-->

<template>
  <Drawer :title="'【' + title + '】使用说明'"
          :width="560"
          placement="left"
          :closable="false"
          :draggable="true"
          transfer
          v-model="visible"
          @on-cancel="cancel"
          @on-visible-change="visibleChange">
    <Markdown :value="documentContent"
              :isPreview="true"
              :theme="'dark'"
              @on-copy="copyHandler"></Markdown>
  </Drawer>
</template>

<script>

  import Markdown from 'vue-meditor'

  export default {
    name: 'ComponentDocument',
    components: {
      Markdown
    },
    props: {
      title: {
        type: String
      },
      compName: {
        type: String
      },
      show: {
        type: Boolean
      }
    },
    data() {
      return {
        visible: this.show,
        documentContent: ''
      }
    },
    mounted() {

    },
    methods: {
      cancel () {
        this.visible = false;
        this.$emit('cancel', this.visible)
      },
      visibleChange (val) {
        if (!val) {
          this.visible = false;
          this.$emit('cancel', this.visible)
        }
      },
      copyHandler () {
        this.$Message.success('复制成功');
      }
    },
    computed: {

    },
    watch: {
      show (val) {
        this.visible = val
      },
      compName (val) {
        if (val) {
          let context = require.context('../functional', true, /\.md$/);
          // console.log(context.keys());
          this.documentContent = '当前组件未编写使用说明文档';
          for (let i=0; i<context.keys().length; i++) {
            if (context.keys()[i].indexOf(val) > -1) {
              this.documentContent = context(context.keys()[i]);
              break
            }
          }
        }
      }
    }
  }
</script>

<style scoped>
  >>> .markdown.border {
    border: 0px !important;
    height: 100% !important;
  }
  >>> .markdown-preview {
    padding: 0px !important;
  }
</style>
